Однофайлові компоненти

Однофайлові компоненти (Single File Component) дозволяю описувати компонет у одному файлі.

Це дозволяє з легкістю переносити компонент в інші проект, відправляти комусь і т.п. Так як весь компонент описаний в одному файлі.

Технологію однофайлові компоненти використовую за допомогою модулів Webpack. Зазвичай використовують на сервері Node.JS.

При використані Vue.component() компоненти реєструються глобально. Та відображаються у вказаному елементі при new Vue({el:'div'});

Такий спосіб підхідить для малих і середніх проетків де JavaScript застосовується на декількох веб-сторінках. При великих проектах де весь front-end керується на JavaScript такий підхід такі недоліки:

не підсвідчується синтаксис у template
немає модульної підтримки CSS
глобальна реєстрація компонента

Для уникнення тих недоліків Vue.js дозволяє використовувати одновайлові компоненти.

Одновайловий компонент у Vue.js це файл з розширенням .vue, який містить: HTML шаблон компонента, JavaScript код, CSS стилі.

Структура файла .vue наступна:

<template>
<div>
	<h1>{{text}</h1>
</div>
</template>

<script>
module.export{
	data:function(){
		return {text:'Привіт!'};
	}
}
</script>

<style>
h3{
	color: #3d3d3d;
	text-align:center;
}
</style>

Створення проекту для однофайлових компонентів Vue.JS

Щоб працювати з однофайловими компонентами Vue.js потрібно щоб вуб встановлений: Node.JS і npm, та встановити модуль Vue CLI. Як встановити модуль Vue CLI читайте у підключення Vue.JS.

Приклад:

Приклад простого однофойгового компонента Vue.JS у файлі App.vue:

<template>
	<div>
		<input v-model="text"> <label>{{text}}</label>
	</div>
</template>

<script>
export default {
	data:function(){
		return {text:'Привіт!'};
	}
}
</script>

<style scoped>
label{
	font-family: Arial, sans-serif;
	color: #2c3e50;
}
input{
	padding:1px;
}
</style>